Tengo dos conjuntos de matrices como respuesta de una API. Por ejemplo, la respuesta del servidor es
let original= [ {firstVal:'1.2'},{SecondVal:'3.2'}];
let last= [{firstVal:'1.2'},{SecondVal:'4.2'}]
la tabla mostrará el valor de la última matriz y la lógica es un valor diferente que debe resaltarse en negrita
| Col1 | Col2 |
| 1.2 | 4.2 |
Digamos que estás renderizando una tabla. Supongo que así es como tendría sentido visualizar estos datos.
Luego almacenará su primera respuesta y la almacenará como suya y representará la tabla predeterminada
Ahora, cuando reciba su última respuesta. Comenzará a comparar la fila y luego la columna, si hay una diferencia, entonces el valor representado debe estar rodeado de una etiqueta para que quede en negrita. Aquí hay un código aproximado
Asumiendo una aplicación de reacción
function RenderRow({row, index, latest}){ if(latest.length < index) { console.log("This should not be possible") return null } return <tr> { row.map((column, c_index) => { if(latest[index][c_index] === column){ return <td>{column}</td> } return <td><b> {column} </b></td> }) } </tr> } function TableBody({original, latest}) { return <tbody> { original.map((row, index) => <RenderRow row={row} index={index} latest={latest}/> ) } </tbody> } function RenderAll(){ let original= [ {firstVal:'1.2'},{SecondVal:'3.2'}]; let latest= [{firstVal:'1.2'},{SecondVal:'4.2'}] return <Table latest={latest} original={original}/> }